import React,{memo} from 'react'
import type { MenuProps } from 'antd';
import {Menu } from 'antd';
import { RoutesType } from '../../router/router';
import {useNavigate} from "react-router-dom"

  const generator = (routes:RoutesType[]):MenuProps["items"] =>{
      return  routes.filter(v=>!v.hidden).map(v=>{
        return {
          key:v.path,
          label:v.meta.title,
          children:v.children && generator(v.children as RoutesType[])
        }
      })
  }

  type PropsType = {
    routes :RoutesType[]
  }
const  Siders:React.FC<PropsType>= memo( ({routes}) =>{
    let ele = generator(routes)
    let navigate = useNavigate()
    // console.log(ele,"ele")
  return (
    <div className='sider'>
         <Menu
          mode="inline"
          defaultSelectedKeys={['/home']}
        //   defaultOpenKeys={['sub1']}
          style={{ height: '100%', borderRight: 0 }}
          onClick={({key})=>navigate(key)}
          items={ele}
        /> 

    </div>
  )
})
export default Siders